<!-- 제목 영역 -->
<div class="ddp-icon-name">
  <div class="ddp-ui-name2">
    <!--<em class="ddp-icon-newlink2"></em>-->
    {{'msg.book.create.workbench.title' | translate}}
    <span class="ddp-txt-info">{{'msg.book.create.workbench.cmplt' | translate}}</span>
    <em class="ddp-bg-order-line2-type2"></em>
  </div>
</div>
<!-- // 제목 영역 -->
<!-- contents in  -->
<div class="ddp-type-contents-in ddp-scroll">
  <div class="ddp-box-popupcontents2">

    <!-- 생성내용 요약 -->
    <div class="ddp-wrap-boxtype">
      <table class="ddp-wrap-boxdata">
        <colgroup>
          <col width="120px" />
          <col width="*" />
        </colgroup>
        <tbody>
        <tr>
          <th> {{'msg.bench.th.name' | translate}} </th>
          <td> {{selectedConnection.name}} </td>
        </tr>
        <tr *ngIf="isNotEmptySelectedConnectionDescription()" >
          <th> {{'msg.bench.th.description' | translate}} </th>
          <td> {{selectedConnection.description}} </td>
        </tr>
        <tr>
          <th> {{'msg.bench.th.db-type' | translate}} </th>
          <td> {{getConvertedConnectionTypeLabel(selectedConnection.implementor)}} </td>
        </tr>
        <tr *ngIf="isEnableUrl(); else disableUrl">
          <th> {{'msg.storage.ui.conn.url' | translate}} </th>
          <td> {{selectedConnection.url}} </td>
        </tr>
        <ng-template #disableUrl>
          <tr>
            <th> {{'msg.bench.th.host' | translate}} </th>
            <td> {{selectedConnection.hostname}} </td>
          </tr>
          <tr>
            <th> {{'msg.bench.th.port' | translate}} </th>
            <td> {{selectedConnection.port}} </td>
          </tr>
        </ng-template>
        </tbody>
      </table>
    </div>
    <!-- // 생성내용 요약 -->

    <!-- edit -->
    <div class="ddp-wrap-edit2" [class.ddp-error]="isInvalidName">
      <label class="ddp-label-type">{{'msg.comm.ui.name' | translate}}</label>
      <input type="text" class="ddp-input-type" placeholder="{{'msg.comm.ui.create.name' | translate}}"
             [ngModel]="name" (ngModelChange)="onChangeNameValidation($event)" maxlength="50"/>
      <!-- error -->
      <span class="ddp-ui-error">{{invalidNameMessage}}</span>
      <!-- error -->
    </div>
    <!-- //edit -->

    <!-- edit -->
    <div class="ddp-wrap-edit2" [class.ddp-error]="isInvalidDescription">
      <label class="ddp-label-type">{{'msg.comm.ui.description' | translate}}</label>
      <input type="text" class="ddp-input-type" placeholder="{{'msg.comm.ui.create.desc' | translate}}"
             [ngModel]="description" (ngModelChange)="onChangeDescriptionValidation($event)"  maxlength="150"/>
      <!-- error -->
      <span class="ddp-ui-error">{{invalidDescriptionMessage}}</span>
      <!-- error -->
    </div>
    <!-- //edit -->
  </div>
  <!-- buttons -->
  <div class="ddp-ui-buttons type-fix">
    <a href="javascript:" class="ddp-btn-type-popup" *ngIf="!isAccessFromExplore" (click)="prev()">{{'msg.comm.btn.previous' | translate}}</a>
    <a href="javascript:" class="ddp-btn-type-popup" *ngIf="isAccessFromExplore" (click)="close()">{{'msg.comm.btn.cancl' | translate}}</a>
    <a href="javascript:" class="ddp-btn-type-popup ddp-bg-black" [class.ddp-disabled]="!isValid()" (click)="complete()">{{'msg.comm.btn.done' | translate}}</a>
  </div>
  <!-- //buttons -->
</div>
<!-- //contents in  -->

